<template>
  <Panel>
      <div class="project">
          <div class="project__header">
              <div class="project__header-primary">
                  <div class="project__header-work-request-name">
                      Alfa Work Request Name
                  </div>
                  <div class="project__header-title">
                      {{project.name}}
                  </div>
              </div>
              <div class="project__header-project-code">
                  PROJ&mdash;2017&mdash;000321
              </div>
          </div>

          <div class="project__meta">
              <div class="project__meta-item">
                  <KeyValue label="Provider" :value="project.provider" :condensed="true"></KeyValue>
              </div>
              <div class="project__meta-item">
                  <KeyValue label="Start Date" :value="project.start_date" :condensed="true"></KeyValue>
              </div>
              <div class="project__meta-item">
                  <KeyValue label="End Date" :value="project.end_date" :condensed="true"></KeyValue>
              </div>
              <div class="project__meta-item">
                  <KeyValue label="Event Type" :value="project.event_type" :condensed="true"></KeyValue>
              </div>
              <div class="project__meta-item">
                  <KeyValue label="Event" :value="project.event" :condensed="true"></KeyValue>
              </div>
              <div class="project__meta-people">
                  <div class="project__meta-person">
                      <div class="project__meta-person-image">
                          <img src="../../assets/img/user-profile.png" alt="">
                      </div>
                      <div class="project__meta-person-primary">
                          <KeyValue label="Client Lead" value="Peter Johns" :condensed="true"></KeyValue>
                      </div>
                  </div>
                  <div class="project__meta-person">
                      <div class="project__meta-person-image">
                          <img src="../../assets/img/user-profile.png" alt="">
                      </div>
                      <div class="project__meta-person-primary">
                          <KeyValue label="Consultant Lead" value="David Leggett" :condensed="true"></KeyValue>
                      </div>
                  </div>
              </div>
          </div>

          <div class="row">

              <div class="col-medium-1-2">
                  <KeyValue label="Description" :value="project.description"></KeyValue>
              </div>
              <div class="col-medium-1-2">
                  <KeyValue label="Success Criteria" :value="project.success_criteria"></KeyValue>
              </div>
          </div>

          <Tabs :panel="false">
              <Tab name="Scope">
                {{ project.scope }}
              </Tab>
              <Tab name="Requirements" :selected="true">
                 {{ project.requirements }}
              </Tab>
              <Tab name="Timeline">
                {{ project.timeline }}
              </Tab>
              <Tab name="Risks">
                {{ project.risks }}
              </Tab>
              <Tab name="Matigation Plan">
                 {{ project.mitigation_plan}}
              </Tab>
          </Tabs>


      </div>
  </Panel>
</template>
<script>
    import KeyValue from './KeyValue.vue'
    import Panel from './Panel.vue'
    import Tab from './Tab.vue'
    import Tabs from './Tabs.vue'

    export default {

        components: {
            Panel,
            KeyValue,
            Tab,
            Tabs
        },

        props: [
            'project'
        ]

    }
</script>
